<template>
  <div>
    <SearchForm v-if="searchOptions.length" :hasImport="hasImport" :hasExport="hasExport" :hasRefresh="hasRefresh" :searchForm="searchForm"
      :searchOptions="searchOptions" @changeDateRange="(prop, value) => {
        if (prop === 'datetimerange') {
          searchForm[prop] = value;
          searchForm.startRealSendTime = (value && value.length) ? value[0] : '';
          searchForm.endRealSendTime = (value && value.length) ? value[1] : '';
        } else {
          searchForm[prop] = value || '';
          searchForm.startTime = (value && value.length) ? value[0] : '';
          searchForm.endTime = (value && value.length) ? value[1] : '';
        }
      }" @handleSearch="onSearch" @handleRefresh="onRefresh" />
    <slot name="btns"></slot>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column v-for="col, c in columns" :key="c" v-bind="{...col}" align="center" show-overflow-tooltip>
        <template #formatter="scope" v-if="col.formatter">
          <span>{{ scope.row[col.prop] || '--' }}</span>
        </template>
        <template #default="scope" v-else>
          <slot v-if="col.isSlot" :name="col.prop" :row="scope.row"></slot>
          <span v-else>{{ scope.row[col.prop] || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="hasOperate" label="操作" :width="operationWidth" align="center" :fixed="operateFixed">
        <template #default="scope">
          <slot name="operation" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="hasPagination" v-show="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize" @pagination="getData" />
  </div>
</template>

<script setup name="BoncTable">
import SearchForm from '@/components/SearchForm'
import { getCurrentInstance, nextTick, onMounted } from 'vue'

const $emit = defineEmits()
const props = defineProps({
  // 筛选
  hasImport: { type: Boolean, default: false },
  hasExport: { type: Boolean, default: false },
  hasRefresh: { type: Boolean, default: true },
  searchForm: { type: Object, default: {} },
  searchOptions: { type: Array, default: [] },
  // 列表
  columns: { type: Array, default: [] },
  hasOperate: { type: Boolean, default: false },
  dataList: { type: Array, default: [] },
  total: { type: Number, default: 0 },
  hasPagination: { type: Boolean, default: true },
  operateFixed: { type: String, default: 'right' },
  operationWidth: { type: Number || String, default: 200 }
})

const loading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)

const onSearch = () => {
  pageNum.value = 1
  pageSize.value = 10
  // getData({pageNum: pageNum.value, pageSize: pageSize.value});
  getData()
}
const onRefresh = () => {
  $emit('reset')
  nextTick(() => {
    onSearch()
  })
}
const getData = (query = { pageNum: pageNum.value, pageSize: pageSize.value }, body = { ...props.searchForm }) => {
  pageNum.value = query.page ? query.page : pageNum.value
  pageSize.value = query.limit ? query.limit : pageSize.value
  loading.value = true
  $emit('getList', { pageNum: pageNum.value, pageSize: pageSize.value }, body, () => {
    loading.value = false
  })
}
onMounted(() => {
  nextTick(() => {
    // getData({pageNum: pageNum.value, pageSize: pageSize.value});
    getData()
  })
})
defineExpose({ getData })
</script>